<template>
	<view class="top">
		<image src="https://www.haopengsong.xyz/static/hotspring/vipbg.png" mode="widthFix" class="bg"></image>
		<view class="vipbox flex-row-between">
			<view class="flex-row-start">
				<image src="https://www.haopengsong.xyz/static/hotspring/viptop.png" mode="widthFix" class="viptop">
				</image>
				<view class="info">
					<view class="flex-row-start goldcolor">
						<image src="https://www.haopengsong.xyz/static/hotspring/vipgold.png" mode="widthFix" class="vipgold">			月卡会员
						</image>
					</view>
					<view class="fontbottom font12">2025-08-08&nbsp;&nbsp;到期</view>
				</view>
			</view>
			<view class="xufei">立即续费</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.top{
		width: 100%;
		height: 90px;
		position: relative;
		.bg,.vipbox{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 90px;
			overflow: hidden;
		}
		.vipbox{
			z-index:2;
			width: 92%;
			left:4%;
			.viptop{
				width: 50px;
				height: 50px;
				margin-right: 15px;
			}
			.goldcolor{
				color:#A26D26;
				font-size: 18px;
				font-weight: 700;
			}
			.fontbottom{
				color: #A57433;
				margin-top: 5px;
			}
			.vipgold{
				width: 37px;
				height: 15px;
			}
			.xufei{
				width: 100px;
				background: linear-gradient( 121deg, #D6A071 0%, #B17D4E 100%);
				border-radius: 20px;
				text-align: center;
				line-height: 35px;
				color:#ffffff;
			}
		}
	}
</style>